<template>
  <div>
    <Artist></Artist>
<div class="init">
  <div v-for="t in mv" class="up">
  <h3 class="titl">{{t.title}}</h3>
    <ul>
    <li v-for="(s,index) in t.subjects" >
      <a class="channels" @click.prevent="fn(s)">{{s.name}}</a>
      <span class="mhz">MHz</span>
    </li>
  </ul>
  </div>

</div>
  </div>
</template>

<script>
import Artist from "@/views/Artist";

export default {
  name: "Mhz",
  components:{
    Artist
  },
  data() {
    return {
      mv: [
        {
          title: "hello",
          subjects: [
            {
              name: "cc",
            }
          ]

        }
      ]
    }
  },
  methods:{
    fn(s) {
      this.$store.commit('setRandomData',s);
      console.log(s);
    }
  },
  created() {
    const _this = this;
    axios.get('http://localhost:8181/index').then(function (resp) {
      // console.log(resp)
      _this.mv = resp.data
    })
  }
}
</script>

<style scoped>
.init{
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.titl{
  text-align: left;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #9b9b9b;
  line-height: 20px;
}
.mhz {
  margin-left: .5em;
  font-size: 10px;
  line-height: 14px;
  color: #acacac;

  font-weight: 500;

}
.channels{
  font-size: 14px;
  color: #030303;
  font-weight: 500;
}

.up{
  margin-bottom: 50px;
}

li{
  margin-left: 0;
  display: block;
  width: 204px;
  height: 54px;
  border-top: 1px solid #f1f1f1;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgb(241, 241, 241);
  border-bottom-color: rgb(241, 241, 241);



  text-align: center;
  line-height: 54px;

}
li:hover{
  cursor:pointer;
}
a{
  text-decoration: none;
}
ul{

  display: flex;
  max-width: 1024px;
  overflow-y:hidden;
  word-wrap:break-word;
  overflow-x:auto;
  box-sizing: border-box;
  text-align: center;
  flex-wrap: wrap;
}
*{
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Source Han Sans CN,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}
</style>